
<template>
<MyVanskeleton :loading="skeletonLoading">
	<template v-slot:my-content>
  <div class="company-style">
    <!-- 导航栏 start -->
    <van-nav-bar title="消息" fixed></van-nav-bar>
    <!-- 导航栏 end -->

    <!-- 聊天列表 -->
    <div class="content-top note-list">
      <MyEmpty v-if="responseList.length === 0 && dataLoading == false" />
      <van-list class="list" v-else @load="loadData" v-model="dataLoading" finished-text="没有更多了" :finished="finished">
        <van-swipe-cell class="item" v-for="(item,index) in responseList" :key="index">
          <div class="show" :class="{'dot':!item.isCompanyRead}" @click="onItem(item)">
            <img src="@/assets/img/system_avatar.png" alt="" v-if="item.isFromAdmin"/>
						<img :src="item.personLogo" alt="" v-else-if="item.personLogo !=''"/>
						<img src="@/assets/img/company/no-avatar-boy.png" alt="" v-else-if="item.personLogo == '' && item.sex=='男'" />
						<img src="@/assets/img/company/no-avatar-girl.png" alt="" v-else-if="item.personLogo == '' && item.sex=='女'"/>
            <dl>
              <dt>
                <b>{{item.isFromAdmin?'系统通知':item.personName}}</b>
                <span style="width:250px;">{{item.dateStr}}</span>
              </dt>
              <dd>
                <span>{{item.lastText}}</span>
              </dd>
            </dl>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" style="height: 100%" />
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
    <!-- 内容 end -->
  </div>
	</template>
</MyVanskeleton>
</template>

<script>
import { NavBar, Icon, Button, List, SwipeCell, Toast } from "vant";
import Global from '@/Global';
import myJmessage from '@/util/myJmessage';
export default {
  name: "NotePage",
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [List.name]: List,
    [SwipeCell.name]: SwipeCell,
  },
  // 定义属性
  data() {
    return {
      pageIndex: 0,
      pageSize: 30,
			skeletonLoading:true,
      dataLoading: false,
			finished:false,
      responseList: []
    };
  },
	mounted(){
		this.loadData();
		this.$bus.$on(Global.bus_company_im_sendmessage, () => {this.reloadData();});
		this.$bus.$on(Global.bus_company_im_message_read, () => {this.reloadData();});
		this.$bus.$on(Global.bus_company_im_message_receive_OutPage,()=>{this.reloadData();})
	},
  // 方法集合
  methods: {
    loadData() {
      this.dataLoading = true;
			this.pageIndex++;
      this.$api.get('/CompanyIM/GetCompanyIMConversationList', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
				this.skeletonLoading=false;
        this.dataLoading = false;
        if (res.success) {
          //no data
          if (this.pageIndex == 1 && res.response.length == 0) {
            //...
						this.finished=true;
          }
          else {
            var resultList = res.response;
            //no more data
            if (this.pageIndex != 0 && res.response.length == 0) {
              this.finished=true;
            }
            this.responseList = [...this.responseList, ...resultList];
          }
        }
				else{Toast(res.msg)}
      })
    },
		reloadData(){
			this.pageIndex=0;
			this.finished = false;
			this.responseList = [];
			this.loadData();
		},
		onItem(item){
			this.$router.push({name:'company-im-window',query:{cid:item.cid,personID:item.personID}})
		},
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
</style>